import { CustomSubTitle } from "@/components/customTitle";
import { Descriptions } from "antd";
import vipBookingStore from "@/store/vipbookingStore";

const LabelStyle = {
  fontFamily: "Roboto",
  fontSize: "14px",
  fontWeight: "400",
  lineHeight: "21px",
  color: "#696767",
  paddingBottom: "0px",
};

const ContentStyle = {
  fontFamily: "Roboto",
  fontSize: "16px",
  fontWeight: "400",
  lineHeight: "24px",
  color: "#202020",
};

interface BasicInfo {
  data?: any;
}

const BasicInfo = ({ data }: BasicInfo) => {
  const { vipBookingData } = vipBookingStore();
  const basicInfo = data || vipBookingData?.basicInfo || {};

  return (
    <>
      <CustomSubTitle>Basic Information</CustomSubTitle>
      <Descriptions
        layout="vertical"
        labelStyle={LabelStyle}
        contentStyle={ContentStyle}
        column={3}
      >
        <Descriptions.Item
          label="Surname (English)"
          style={{ paddingBottom: 0 }}
        >
          {basicInfo.enName || "-"}
        </Descriptions.Item>
        <Descriptions.Item label="Given Name (English)">
          {basicInfo.enName || "-"}
        </Descriptions.Item>
        <Descriptions.Item label="Name (Chinese)">
          {basicInfo.cnName || "-"}
        </Descriptions.Item>
        <Descriptions.Item label="Email">
          {basicInfo.email || "-"}
        </Descriptions.Item>
        <Descriptions.Item label="Mobile">
          +852 {basicInfo.mobile || "-"}
        </Descriptions.Item>
      </Descriptions>
    </>
  );
};

export default BasicInfo;
